<!-- 员工管理 -->
<template>
  <div class="header-content flex flex-horizontal-end">
    <div class="flex btn-content">
      <Button type="primary" style="margin-right: 8px" @click="addEmployee">添加人员</Button>
    </div>
  </div>
  <dt-grid ref="tableRef" :onFetch="onFetch" page />
  <!--添加人员-->
  <dt-modal-edit
    ref="editRef"
    title="添加人员"
    @ok="onOk"
    :label-width="120"
    okText="添加人员"></dt-modal-edit>
  <!--禁用-->
  <dt-modal-edit ref="disabledRef" :title="`${disabledStatus}人员`" @ok="disabledOnOk" :label-width="120">
    是否将所选员工设为{{ disabledStatus }}？
    <Input
      style="margin-top: 10px"
      v-show="disabledStatus === '禁用'"
      v-model="disabledRemark"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 4 }"
      :maxlength="200"
      placeholder="请输入禁用原因" />
  </dt-modal-edit>

  <!--编辑-->
  <edit-page ref="editPageRef" @search="onSearch"></edit-page>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { addOpt } from './biz/add'
  import { listColumn } from './biz/columns.js'
  import dt from '@dt/dt'
  import editPage from './components/editPage.vue'
  import employeeMgr from './biz/index'

  const [tableRef, editRef, editPageRef, disabledRef] = [ref(), ref(), ref(), ref()]

  let [disabledRemark, disabledStatus, disabledData] = [ref(''), ref(''), ref(null)]
  onMounted(() => {
    tableRef.value.init(new listColumn(fun))
    tableRef.value.fetch()
  })
  let editInfo = reactive({
    phone: '',
    roleIds: [],
    userName: ''
  })

  const fun = {
    onEdit: (row) => {
      row.roleId = row.roleIds || []
      editPageRef.value.show(row)
    },
    onChangeStatus: (row) => {
      disabledRef.value.show()
      disabledRemark.value = ''
      disabledStatus.value = row.state == '1' ? '禁用' : '启用'
      let params = {
        userIds: [row.id],
        state: row.state == '1' ? '0' : '1'
      }
      disabledData.value = params
    }
  }

  function onFetch(data) {
    return employeeMgr.getSysUserList(data)
  }

  function onSearch() {
    tableRef.value.fetch()
  }

  function disabledOnOk() {
    employeeMgr.disableSysUsers({ ...disabledData.value, remarks: disabledRemark.value }).then((res) => {
      dt.ui.Message.success('禁用成功。')
      disabledRef.value.hide()
      onSearch()
    })
  }

  function addEmployee() {
    editInfo = {
      phone: '',
      roleIds: [],
      userName: ''
    }
    editRef.value.show(new addOpt(), editInfo)
  }

  function onOk() {
    employeeMgr.addSysUserFun(editInfo).then((res) => {
      dt.ui.Message.success('添加人员成功。')
      editRef.value.hide()
      onSearch()
    })
  }
</script>

<style scoped lang="scss"></style>
